<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>生命周期</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
            <div id="react"> </div>
            <!--准备好一个容器-->
            <!--引入react核心库,核心库必须先引入-->
            <script type="text/javascript" src="./js/react.development.js"></script>
            <!--引入react-dom, 用于支持react操作DOM-->
            <script type="text/javascript" src="./js/react-dom.development.js"></script>
            <!--引入babel,用于将jsx转为js-->
            <script type="text/javascript" src="./js/babel.min.js"></script>
        


            <script type="text/babel">
            class Life extends React.Component {

                //初始化状态
                state={opacity:1}

                 //自定义赋值函数
                 getUninstall=()=>{
                //卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('react'))
                 }

                //组件挂载完毕
                componentDidMount(){
                //  console.log(this) //组件实例对象
                this.timer= setInterval(() => {
                    //console.log(this)
                    let {opacity} = this.state
                    opacity= opacity-0.1
                    if(opacity<=0){opacity=1}
                    this.setState({opacity:opacity}) 
                    }, 200)  
                }

                //组件将要卸载
                componentWillUnmount(){
                    //清除定时器
                    clearInterval(this.timer)
                }

                //初始化渲染，状态更新之后，
                render() {
                    return(
                        <div>
                         <h2 style={{opacity:this.state.opacity}} >我爱你邓紫棋</h2> 
                        <button onClick={this.getUninstall}>卸载组件</button>     
                            
                        </div>             
                    )
                }   
            }  
            ReactDOM.render(<Life/>, document.getElementById("react"));

    </script>

    </body>
</html>